<!DOCTYPE html>
<html>
<head>
    <title>后台管理系统</title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
    <link rel='stylesheet' href='/stylesheets/chartCard.css'/>
    <link rel='stylesheet' href='/stylesheets/dragchartcomp.css'/>
    <link rel='stylesheet' href='/stylesheets/table.css'/>
    <script type="text/javascript" src="/javascripts/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="/javascripts/drag.js"></script>
    <script>
    function handleDragEnd() {
        $('.info_cont').hide()
        $('.table_card_60').css('width', '100%')
    }

    window.onload = function () {
        drag.init('info_cont',
            [
                {
                    id: 'module1',
                    appName: '应用1',
                    moduleName: '模块3',
                    appPath: 'http://localhost:3000',
                    modulePath: 'http://localhost:3000/module3'
                }
            ],
            handleDragEnd
        );
    }
    </script>
</head>
<body>
<% include common/header.ejs %>
<div class="main">
    <% include common/menu.ejs %>
    <div class="main-content">
        <div class="wrapper microserve_cont">
            <div class="chart_card">
                <div class="chart_card_title">
                    虚拟机综合状态
                </div>
                <div class="chart_card_content">
                    <div class="chart_box">
                        <% include microserve/chart1.ejs %>
                    </div>
                    <div class="chart_box">
                        <% include microserve/chart2.ejs %>
                    </div>
                    <div class="chart_box">
                        <% include microserve/chart3.ejs %>
                    </div>
                    <div class="chart_box">
                        <% include microserve/chart4.ejs %>
                    </div>
                </div>
            </div>
            <div class="table_area">
                <div class="table_card table_card_60">
                    <table class="table_black">
                        <thead class="table_head">
                        <tr>
                            <td class="table_title">微服务名称</td>
<!--                            <td class="table_title">运行开始时间</td>-->
                            <td class="table_title">描述</td>
                            <td class="table_title">I/O读写情况</td>
                            <td class="table_title">CPU使用率</td>
                            <td class="table_title">操作</td>
                        </tr>
                        </thead>
                        <tbody class="table_body">
                        <% for(var i = 0; i < 10; i++) { %>
                            <tr>
                                <td class="table_text">任务管理</td>
<!--                                <td class="table_text">2019/04/17 12:01:11</td>-->
                                <td class="table_text">包括...</td>
                                <td class="table_text">2MB/秒</td>
                                <td class="table_text">
                                    <div class="progress">
                                        <div class="progress_bg">
                                            <div class="progress_bar"></div>
                                        </div>
                                        <div class="progress_num">12%</div>
                                    </div>
                                </td>
                                <td class="table_text" style="color: #67c23a">正在运行</td>
                            </tr>
                        <% } %>
                        </tbody>
                    </table>
                </div>
                <div class="scroll_list info_cont">
                    <div class="table_card_title">
                        任务实时信息
                    </div>
                    <% include scrolllist.ejs %>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
